<template>
  <div
    class="flex flex-col items-center justify-between h-[100%] p-2 w-8 border-r"
    :class="className"
  >
    <div class="flex flex-col items-center">
      <!-- 点击事件取消注释并绑定 -->
      <span
        title="operation.addBoard"
        id="add-board-button"
        class="relative flex items-center mb-5 cursor-pointer operation-item"
        @click="addFile('New Excalidarw', 'board', tabModel, currentFolderId)"
      >
        <Tooltip title="新建Excalidarw白板" placement="right">
          <Palette :class="[getSizeClassName, 'text-current text-slate-500']" />
        </Tooltip>
      </span>
      <span
        title="operation.addTldraw"
        id="add-tldraw-button"
        class="relative flex items-center mb-5 cursor-pointer operation-item"
        @click="addFile('New Tldraw', 'tldraw', tabModel, currentFolderId)"
      >
        <Tooltip title="新建Tldraw白板" placement="right">
          <span>
            <TldrawIcon class="w-5 h-5 text-current cursor-pointer menu-icon text-slate-500" />
          </span>
        </Tooltip>
      </span>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { Tooltip } from 'ant-design-vue';
import useTabJsonModel from '@renderer/hooks/useTabJsonModel';
import TldrawIcon from '@renderer/icons/TldrawIcon.vue';
import { Palette } from 'lucide-vue-next';

const props = defineProps({
  size: { type: String, default: 'middle' },
  className: { type: String, default: '' }
});

// 取消注释并正确引入相关函数和模块
import useAddFile from '@renderer/hooks/useAddFile';
// import useCurrentFolderId from '@renderer/hooks/useCurrentFolderId';

const { addFile } = useAddFile();
const { model: tabModel } = useTabJsonModel();
// const { currentFolderId } = useCurrentFolderId();
const systemSettingVisible = ref(false);

const getSizeClassName = computed(() => {
  switch (props.size) {
    case 'small':
      return 'w-5 h-5';
    case 'middle':
      return 'w-5 h-5';
    case 'large':
      return 'w-6 h-6';
    default:
      return 'w-5 h-5';
  }
});
</script>

<style scoped>
</style>
